﻿<div v-if="vmorder.cart.CheckoutAttributes[0]" class="checkout-attributes p-0">
    <div v-for="attribute in vmorder.cart.CheckoutAttributes" :id="'checkout_attribute_label_' + attribute.Id" class="col-12 px-0 mb-2">
        <span class="col-form-label text-prompt">
            <template v-if="attribute.TextPrompt !== null">
                {{attribute.TextPrompt}}
            </template>
            <template v-else>
                {{attribute.Name}}
            </template>
        </span>
        <span v-if="attribute.IsRequired" class="required">*</span>
        <template v-if="attribute.AttributeControlType == 4">
            <label :for="'checkout_attribute_' + attribute.Id" class="sr-only">checkout_attribute_{{attribute.Id}}</label>
            <input :name="'attributes['+attribute.Id+']'" type="text" class="form-control textbox" :id="'checkout_attribute_' + attribute.Id" v-model="attribute.DefaultValue" :value="attribute.DefaultValue" onchange="checkoutAttributeChange();"/>
        </template>
        <template v-if="attribute.AttributeControlType == 1">
            <label :for="'checkout_attribute_' + attribute.Id" class="sr-only">checkout_attribute_{{attribute.Id}}</label>
            <select :id="'checkout_attribute_' + attribute.Id" class="form-control custom-select" onchange="checkoutAttributeChange()" :name="'attributes['+attribute.Id+']'">
                <template v-if="attribute.IsRequired == false">
                    <option value="">---</option>
                </template>
                <option v-for="attributeValue in attribute.Values" :selected="attributeValue.IsPreSelected" :value="attributeValue.Id">
                    <template v-if="attributeValue.PriceAdjustment == null">
                        {{attributeValue.Name}}
                    </template>
                    <template v-else>
                        {{attributeValue.Name}} [{{attributeValue.PriceAdjustment}}]
                    </template>
                </option>
            </select>
        </template>
        <template v-if="attribute.AttributeControlType == 2">
            <ul class="option-list px-0 mb-0">
                <li v-for="attributeValue in attribute.Values">
                    <fieldset>
                        <legend class="sr-only">
                            checkout_attribute_{{attribute.Id}}
                        </legend>
                        <label class="custom-control custom-radio">
                            <input class="custom-control-input" :id="'checkout_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'attributes['+attribute.Id+']'" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" onclick="checkoutAttributeChange()"/>
                            <span class="custom-control-label"></span>
                            <span class="custom-control-description" :for="'checkout_attribute_' + attribute.Id + '_' + attributeValue.Id">
                                <template v-if="attributeValue.PriceAdjustment == null">
                                    {{attributeValue.Name}}
                                </template>
                                <template v-else>
                                    {{attributeValue.Name}} [{{attributeValue.PriceAdjustment}}]
                                </template>
                            </span>
                        </label>

                    </fieldset>
                </li>
            </ul>
        </template>
        <template v-if="attribute.AttributeControlType == 3 || attribute.AttributeControlType == 50">
            <fieldset>
                <legend></legend>
                <ul class="option-list px-0 mb-0">
                    <li v-for="attributeValue in attribute.Values">
                        <label class="custom-control custom-checkbox">
                            <input v-if="attribute.AttributeControlType == 50" class="custom-control-input" :id="'checkout_attribute_' + attribute.Id + '_' + attributeValue.Id" type="checkbox" :name="'attributes['+attribute.Id+']'" :value="attributeValue.Id" onclick="checkoutAttributeChange()" :checked="attributeValue.IsPreSelected" disabled="disabled"/>
                            <input v-else class="custom-control-input" :id="'checkout_attribute_' + attribute.Id + '_' + attributeValue.Id" type="checkbox" :name="'attributes['+attribute.Id+']'" :value="attributeValue.Id" onclick="checkoutAttributeChange()" :checked="attributeValue.IsPreSelected"/>
                            <span class="custom-control-label"></span>
                            <span class="custom-control-description" :for="'checkout_attribute_' + attribute.Id + '_' + attributeValue.Id">
                                <template v-if="attributeValue.PriceAdjustment == null">
                                    {{attributeValue.Name}}
                                </template>
                                <template v-else>
                                    {{attributeValue.Name}} [{{attributeValue.PriceAdjustment}}]
                                </template>
                            </span>
                        </label>
                    </li>
                </ul>
            </fieldset>
        </template>
        <template v-if="attribute.AttributeControlType == 10">
            <textarea class="form-control" :id="'checkout_attribute_' + attribute.Id" :name="'attributes['+attribute.Id+']'" v-model="attribute.DefaultValue" :value="attribute.DefaultValue" onchange="checkoutAttributeChange()">{{attribute.DefaultValue}}</textarea>
        </template>
        <template v-if="attribute.AttributeControlType == 20">
            <input :id="'checkout_attribute_' + attribute.Id" :name="'attributes['+attribute.Id+']'" class="form-control" :value="attribute.DefaultValue" v-model="attribute.DefaultValue" onchange="checkoutAttributeChange();" type="date"/>
        </template>
        <template v-if="attribute.AttributeControlType == 30">
            <template>
                <div :id="'checkout_attribute_' + attribute.Id + 'uploader'">
                    <b-form-file :accept="attribute.AllowedFileExtensions" type="file" id="qqfile" name="qqfile" :data-url="'/uploadfilecheckoutattribute/' + attribute.Id" :attribute="attribute.Id" onchange="uploadFile(this)"/>
                </div>
            </template>
            <input class="hidden-upload-input" type="hidden" onchange="checkoutAttributeChange()" :id="'checkout_attribute_' + attribute.Id" :name="'attributes['+attribute.Id+']'" v-model="attribute.DefaultValue" :value="attribute.DefaultValue"/>
            <div id="download-message" class="alert my-2" style="display:none;"></div>
            <a :id="'checkout_attribute_' + attribute.Id + 'downloadurl'" class="download-file btn btn-outline-info" style="display:none;">
                Download
            </a>
            <script asp-location="Footer" asp-order="300">

                    function uploadFile(e) {
                        var formData = new FormData();
                        var imagefile = e;
                        var url = imagefile.getAttribute('data-url');
                        
                        let attrId = e.getAttribute("attribute");
                        formData.append("image", qqfile.files[0]);
                        axios.post(url, formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(function (response) {
                            if (response.data.success) {
                                vmorder.cart.CheckoutAttributes.find(d => d.Id == attrId).DefaultValue = response.data.downloadGuid;
                                var message = response.data.message;
                                var downloadGuid = response.data.downloadGuid;
                                var downloadUrl = response.data.downloadUrl;
                                var downloadBtn = document.querySelector('.download-file');
                                var messageContainer = document.getElementById('download-message');

                                e.setAttribute('qq-button-id', downloadGuid);
                                document.querySelector('.hidden-upload-input').value = downloadGuid;

                                messageContainer.style.display = "block";
                                messageContainer.classList.remove('alert-danger');
                                messageContainer.classList.add('alert-info');
                                messageContainer.innerText = message;

                                downloadBtn.style.display = "inline-block";
                                downloadBtn.setAttribute('href', downloadUrl);

                            } else {
                                var message = response.data.message;
                                var messageContainer = document.getElementById('download-message');
                                messageContainer.style.display = "block";
                                messageContainer.classList.remove('alert-info');
                                messageContainer.classList.add('alert-danger');
                                messageContainer.innerText = message;
                            }
                        }).then(function () {
                            checkoutAttributeChange()
                        });
                    }
                </script>
        </template>
        <template v-if="attribute.AttributeControlType == 40">
            <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
                <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
                    <label :for="'checkout_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
                        <input :id="'checkout_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'attributes['+attribute.Id+']'" :value="attributeValue.Id" onchange="checkoutAttributeChange()" :checked="attributeValue.IsPreSelected"/>
                        <template v-if="attributeValue.PriceAdjustment == null">
                            <span class="color-container" :title="attributeValue.Name">
                                <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span>
                            </span>
                        </template>
                        <template v-else>
                            <span class="color-container" :title="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'">
                                <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span>
                            </span>
                        </template>
                    </label>
                </li>
            </ul>
        </template>

    </div>
</div>

<script asp-location="Footer" asp-order="300">
        document.addEventListener("DOMContentLoaded", function () {
            checkoutAttributeChange();         
        });

        function checkoutAttributeChange() {
            if (document.querySelector('#shopping-cart-form')) {
                var form = document.querySelector('#shopping-cart-form');
                var data = new FormData(form);
                axios({
                    method: 'post',
                    data: data,
                    url: '@Html.Raw(Url.Action("checkoutattributechange", "shoppingcart"))',
                }).then(function (response) {
                    vmorder.totals = response.data.model;
                    if (response.data.checkoutattributeinfo) {
                        vmorder.cart.CheckoutAttributeInfo = response.data.checkoutattributeinfo;
                    }
                    else {
                        vmorder.cart.CheckoutAttributeInfo = '';
                    }
                    if (response.data.enabledattributeids) {
                        for (var i = 0; i < response.data.enabledattributeids.length; i++) {
                            if (document.querySelector('#checkout_attribute_label_' + response.data.enabledattributeids[i])) {
                                document.querySelector('#checkout_attribute_label_' + response.data.enabledattributeids[i]).style.display = 'block';
                            }
                            if (document.querySelector('#checkout_attribute_input_' + response.data.enabledattributeids[i])) {
                                document.querySelector('#checkout_attribute_input_' + response.data.enabledattributeids[i]).style.display = 'block';
                            }
                        }
                    }
                    if (response.data.disabledattributeids) {
                        for (var i = 0; i < response.data.disabledattributeids.length; i++) {
                            if (document.querySelector('#checkout_attribute_label_' + response.data.disabledattributeids[i])) {
                                document.querySelector('#checkout_attribute_label_' + response.data.disabledattributeids[i]).style.display = 'none';
                            }
                            if (document.querySelector('#checkout_attribute_input_' + response.data.disabledattributeids[i])) {
                                document.querySelector('#checkout_attribute_input_' + response.data.disabledattributeids[i]).style.display = 'none';
                            }
                        }
                    }
                })
            }
        }
   </script>